<template>
  <div class="container" v-title data-title="检测端绑定车辆">
  <ul class="word">
    <li class="clearfix">
      <div class="infolist">车牌</div>
      <div class="infolist"><input type="text" disabled v-model="num1" value="" placeholder=""></div>
      <div class="infolist scan-code" @click='qrCodeApp(1)'><img :src="require('../styles/asset/scan.png')"></div></li>
    <li class="clearfix">
      <div class="infolist">车辆中控号码</div>
      <div class="infolist"><input type="text" disabled v-model="num2" value="" placeholder=""></div>
      <div class="infolist scan-code"  @click='qrCodeApp(2)'><img :src="require('../styles/asset/scan.png')"></div></li>
  </ul>
  <div class="bindBtn" @click="bindCarAjax">绑定</div>
  <ul class="tools clearfix">
    <li>
      <div></div>
      <div>开车</div>
    </li>
    <li>
      <div></div>
      <div>锁车</div>
    </li>
    <li>
      <div></div>
      <div>寻车</div>
    </li>
    <li>
      <div></div>
      <div>开座锁</div>
    </li>
  </ul>
    <simplert ref="simplert"></simplert>
  </div>
</template>

<script>
  import Simplert from '../../components/dialog/dialog.vue'
  let filters = {
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          let ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  };

  export default {
    data () {
      return {
        num1:'',
        num2:'',
        token:"",
        id:''
      }
    },
    created () {

    },
    mounted(){
      const that = this;
      const url = window.location.href;
      // this.id = filters.parseURL(url).params.id;
      this.$util.getUserToken().then(token=>{
        that.token = token;
        // that.getSuiteId();
      });
      //native扫码结果返回
      window.codeResult = (type, result)=>{
        if(type == 1) {
          this.num1 = result;
        } else if(type == 2) {
          this.num2 = result;
        }

        // this.open(result,false,'','','fade_alert',function(){});
      };
      let root = process.env.MAIN_ROOT;
    },
    components: {
      Simplert
    },
    methods: {
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message
        }
        this.$refs.simplert.openSimplert(obj)
      },
      qrCodeApp(type) {
        let userAgentObj = navigator.userAgent;
        let that = this;
        if(userAgentObj.match(/Android/i)){
          window.control.getQRcode(type);
        } else {
          that.open('不是安卓手机',false,'','','fade_alert',function(){

          });
        }
      },
      bindCarAjax(){
        let that = this;
        var dataObj = {
          carNo: that.num1, //车牌号
          frameNo: '', //车架号
          carGpsNo: '', //车辆GPS号码
          carControlNo: that.num1, //车辆中控号码
          specId: '', //车型ID
          areaCode: '', //城市编码
          carGpsNo: '', //areaName
          fToken: that.token  //token
        }
        that.$api.post('/fcar/v1/authFApi/add',{},s=>{
          console.log(s)
        },f=>{
          that.open(f.errorMessage,false,'','','fade_alert',function(){

          });
        })
      },
    }
  }
</script>
<style scoped >
  @import "../styles/styles.css";
  .container{  width: 100%; height: 100%;}
  .word li{
    width:7.5rem;
    padding:0 0.25rem;
    color:#000;
    border-bottom:1px solid #ccc;
    font-size: 0.3rem;
  }
  .infolist{
    width:2.4rem;
    height:0.8rem;
    padding:0.2rem 0.1rem;
    text-align: left;
    float: left;
  }
  .word li>div:nth-of-type(2){
    width:4rem;
  }
  .word li input{
    padding-right: 0.1rem;
    font-size: 0.3rem;
    text-align: right;
    border:none;
    outline: none;
    background: transparent;
  }
  .word li .scan-code{
    width:0.5rem;
    padding-left:0.1rem;
  }
  .scan-code img{
    display: block;
    width:0.4rem;
  }
  .bindBtn{
    width:6rem;
    height:0.9rem;
    margin:0.5rem auto 0 auto;
    background: #009EA6;
    border-radius: 0.1rem;
    text-align: center;
    line-height: 0.9rem;
    color:#fff;
    font-size: 0.36rem;
  }
  .tools{
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    max-height: 40%;
    overflow-y:auto;
    background: #009EA6;
  }
  .tools li{
    width:25%;
    padding:0.1rem 0;
    font-size: 0.28rem;
    float: left;
  }
  .tools li>div:first-child{
    width:0.6rem;
    height:0.6rem;
    border:1px solid #fff;
    border-radius: 100%;
    margin-bottom:0.1rem;
  }
  .tools li>div{
    margin:0 auto;
    color:#fff;
    text-align: center;
  }
</style>
